<template>
  <div class="container">
     <!--地图容器-->
     <div class="search">
     	<i-icon type="search" size="18" color="#606060" style="margin-top: -4px;" />
     	 <input @input="getsuggest" placeholder="输入地理位置"></input>
     </div>
   <div class="search_list">
   	 <div v-for="(item,index) in setData" class="search_text">
      <div @click="select(index)" class="text">{{item.addr}}</div>
    </div>
   </div>
   
  </div>
</template>

<script>
var network = require("../../../utils/commonality.js")
var QQMapWX = require('../../../../static/map/qqmap-wx-jssdk.js');
var app = getApp();
export default {
  data () {
    return {
      setData:''
    }
  },
  methods: {
    getsuggest(e){
      var qqmapsdk = new QQMapWX({
        key: 'OTEBZ-3SGWR-K3SW3-WHL7J-IGXJH-5PFLN' 
     });  
      var _this = this;
      qqmapsdk.getSuggestion({
        keyword: e.mp.detail.value, 
        success: function(res) {
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({
              title: res.data[i].title,
              id: res.data[i].id,
              addr: res.data[i].address,
              city: res.data[i].city,
              district: res.data[i].district,
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
           _this.setData=sug
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
        }
      });
    },
    select(index){
      for (var i = 0; i < this.setData.length;i++){
        if(i == index){
              wx.switchTab({
                url: '../venue_index/main'
              })
        }  
      }
    }
  }
}
</script>

<style scoped>
.search{
	width: 84%;
	height:33px;
	margin: 0 15px;
	border-radius: 15px;
	background: #eeeeee;
	display: flex;
	align-items: center;
	padding: 0 15px;
	position: fixed;
	top: 0;
}
.search input{
	width: 80%;
	height: 33px;
	line-height: 33px;
	border: none;
	outline: none;
	background: #eeeeee;
	font-size: 13px;
	color: #aaaaaa;
	padding-left: 3px;
}
.search_list{
	/*width: 100%;*/
	margin-top: 43px;
}
.search_list .search_text{
	/*width: 100%;*/
	background: #f8f8f8;

}
.search_list .search_text .text{
	/*width: 100%;*/
  padding: 15px;
	border-bottom: 1px solid #cdcdcd;
	font-size:14px ;
	color: #aaaaaa;
}
</style>
